WES BOS系列影片
Alex快速導讀系列影片

今天要為靜態的文章，
添加一些圖片進場的動畫效果
練習抓取螢幕與圖片的長度，
進而控制圖片的進場時間。

1.先抓出需要做互動效果的圖片們

let sliderImages = document.querySelectorAll('img')

2.設置監聽器
今天用到scroll事件，scroll時會觸發checkSide函式

window.addEventListener('scroll', checkSide)

3.撰寫checkSide函式
我們的目標是要讓圖片進入視窗一半時，讓圖片產生進場效果
需要知道三個定位
視窗的最頂部位置- windowTop
視窗的最底部位置- windowBottom
該圖片的一半高度位於視窗的位置- imgMiddle

function checkSlide() {
  const windowTop = window.scrollY
  const windowBottom =  windowTop + window.innerHeight
  sliderImages.forEach(sliderImage => {
    const imgMiddle = sliderImage.offsetTop + sliderImage.height / 2;
  });
}

接下來作判斷
如果
該圖片的一半高度位於視窗的位置 > 視窗的最底部位置
且
該圖片的一半高度位於視窗的位置 < 視窗的最頂部位置
才加上 active 樣式
否則就
取消 active 樣式

if (imgMiddle < windowBottom && imgMiddle > windowTop) {
  sliderImage.classList.add("active");
} else {
  sliderImage.classList.remove("active");
}

4.加入debounce，使scroll事件延遲觸發
關於debounce請參考
網頁 DOM 事件的效能優化：Debounce 和 Throttle
這邊不再深究，或者有興趣也可以聽聽Alex老師的講解，會有更深入的理解

window.addEventListener('scroll', debounce(checkSlide));

今天的小動態製作完成
給自己鼓勵鼓勵~~
明天見。

完整的程式碼請直接點擊下方codePen連結
codePen
或者也可以直接到WES BOS的網站下載打包好的檔案
javascript30